<template>
  <div class="title">
    <h4 :style="{fontSize:titles.size}">{{titles.name}}</h4>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
    props:['titles']
};
</script>
<style lang="less" scoped>
  .title {
    position: relative;
    line-height: 50px;
    height: 50px;
    h4 {
      font-size: 14px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 30%;
      height: 1em;
      line-height: 1em;
      text-align: center;
      font-weight: normal;
      margin: auto;
      z-index: 2;
      background: #fff;
    }
    .line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0px;
      margin: auto;
      height: 2px;
      width: 40%;
      background: #ccc;
      z-index: 1;
    }
  }

</style>